<template>
	<view>
		<page-head :headTitle="cityInfo.city" :user="true" :glide="true" :news="true" :sao="true" 
		 @clickLeftUser="clickLeftUser" @clickGlide="clickCity" @clickRightNews="clickRightNews" @clickRightSao="clickRightSao"></page-head>
		<view class="search-h bg-white fixed fixed-top9" ref="vref"></view>
		<view class="p-t-b3 fixed fixed-top9 orde-pb">
			 <view class="flex flex-1 bg-white  align-center  m-l-r3 m-b4">
				<input class="search-width flex flex-1 p-l3 search-h border-r box-shadowr" placeholder-class="input-goods fs-32 search-width" style="width: 98%;" placeholder-style="width: 98%;" @input="setDemands" type="text" placeholder="请输入您的吃喝游玩需求">
				<button class="demand fs-32 ml" @tap="licekSubmit">发需求</button>
		    </view>
			
			<view :style="{'height': windowHeight}" style="margin-top: 6rpx;">
				<map v-if="!mapShow" class="width" style="height: 100%;" :scale="scale" :latitude="latitude" :longitude="longitude"></map>
				<map v-if="mapShow" class="width" style="height: 100%;" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="marker" @markertap="markertap" @callouttap="callouttap"></map>
			</view>
			<view class="fixed nav-list flex bg-white p-t-b3 border-r-1">
				<navigator class="flex-1 border-rigth" :url="'../seek-guide/seek-guide?city='+currentCity">
					<view class="position-r">
						<view class="flex align-center justify-content">
							<image src="/static/images/bsdy_icon.png" class="nav-pic">
							<text class="p-l2">本市导游</text>
						</view>
						<view v-show="guide_num" class="position-a nav-number fs-24">{{guide_num}}</view>
					</view>
				</navigator>
				<navigator :url="'../guide-details/guide-details?id='+recommend_guide" class="flex-1 border-rigth">
					<view class="flex align-center flex-1 justify-content">
						<image src="/static/images/tjdy_icon.png" class="nav-pic">
						<text class="p-l2">推荐导游</text>
					</view>
				</navigator>
				<view  class="flex-1" @tap="myLocation">
					<view class="flex align-center flex-1 justify-content">
						<image src="/static/images/wdwz_icon.png" class="nav-pic">
						<text class="p-l2">我的位置</text>
					</view>
				</view>
			</view>
		</view>
		<view v-show="isShow">
			<view class="cancel-bj fixed fixed-top" @click="clickLeftHide"></view>
			<view class="left-width bg-white fixed fixed-top">
				<head-pic v-bind:name="userInfo.name" :atte="false" :image="userInfo.avatar" @userClick="userEdit"></head-pic>
				<view class="m-t7 p-l4">
					<head-list listName="需求订单" imageList="/static/images/order.png" @urlList="orderList"></head-list>
					<!-- <head-list listName="预约" imageList="/static/images/make.png" @urlList="bookingOrder"></head-list> -->
					<head-list listName="设置" imageList="/static/images/setup.png" @urlList="setUp"></head-list>
				</view>
				<view class="flex align-center position-a nav-list ">
					<navigator url="../seek-guide/seek-guide">
						<view class="flex flex-wrap justify-content">
							<view class="width flex justify-content">
								<image class="nav-pic" src="/static/images/seek-guide.png">
							</view>
							<text class="fs-32 m-t-18">找个导游</text>
						</view>
					</navigator>
					<!-- <navigator url="../delicacy/delicacy">
						<view class="flex flex-wrap justify-content">
							<view class="width flex justify-content">
								<image class="nav-pic" src="/static/images/seek-delicacy.png">
							</view>
							<text class="fs-3 m-t-18">找美食</text>	
						</view>
					</navigator> -->
					<navigator url="../personal-tailor/personal-tailor">
						<view class="flex flex-wrap justify-content"> 
							<view class="width flex justify-content">
								<image class="nav-pic" src="/static/images/personal-tailor.png">
							</view>
							<text class="fs-3 m-t-18">发个需求</text>	
						</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import headPic from '@/components/common/head-pic.vue'
import headList from '@/components/common/head-list.vue'
import {mapState,mapMutations} from 'vuex'
	export default {
		components:{
			pageHead,
			headPic,
			headList
		},
		data() {
			return {
				userInfo:'',
				cityInfo: {name: '南宁市'},
				isShow:false,
				windowHeight:"",
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				scale:11,
				city:'南宁市',
				latitude: 22.818343,
				longitude: 108.373741,
				mapShow:true,
				covers: [],
				coversRaw: [],
				cover_i: 0,
				lastClickCover: '',
				text: '',
				type:'scan-listener',
				result:'',//获取到的二维码内容，根据自己需求处理结果
				demands:'', //输入框出行需求
				recommend_guide:'', //推荐导游id
				guide_num:0, //本市导游数量
				currentCity:'',
			}
		},
		computed:
		{ 
			...mapState(['mapScale']),
			marker(){
				return this.covers.slice(0)
			}
		},
		onShow(){ 
			try {
				const value = uni.getStorageSync('cityInfo');
				if (value) {
					var json = JSON.stringify(value.city);
					this.cityInfo.city = JSON.parse(json);
					//console.log(JSON.stringify(value));
				}
			} catch (e) {
				// error
			}
			var _this = this;
			setTimeout(function(){_this.loadUserInfo()}, 500);
		},
		onLoad() {
			var mapScale =  uni.getStorageSync('mapScale');
			if(mapScale){
				uni.removeStorage({
					key:'mapScale',
				})
				this.scale = mapScale;
			}
			// this.loadUserInfo();
			let _this = this;
			// this.userInfo = uni.getStorageSync('userInfo');
			this.cityInfo = uni.getStorageSync('cityInfo');
			if(!this.cityInfo){
				const KEY ='ZMNBZ-K3H3D-V4W4I-PVLQV-JO7PJ-CJFRD'; //key 必填
				let url = 'https://apis.map.qq.com/ws/location/v1/ip';
				_this.$jsonp(url,{
				  key:KEY,
				  callbackName: 'QQmap',
				  output:'jsonp',
				}).then(json => {
					var result = json.result;
					var data = {};
					data.city = result.ad_info.city;
					data.latitude = result.location.lat;
					data.longitude = result.location.lng;
					// alert(JSON.stringify(json));return;
					var local = {
						fullname: data.city,
						lat: data.latitude,
						lng: data.longitude
					};
					uni.setStorageSync('localCity', local);
					_this.setCity(data);
					window.location.reload();
				})
			}else{
				this.latitude = this.cityInfo.latitude;
				this.longitude = this.cityInfo.longitude;
				var me = [{
					id: -1,
					iconPath: '/static/images/location.png',
					longitude: this.longitude,
					latitude: this.latitude,
					callout:{
						content:this.cityInfo.city,
						padding:5,
						borderRadius:5,
						display:'ALWAYS'
					},
				}];
				this.covers.push.apply(this.covers, me);
				this.getCovers();
			}
			uni.getSystemInfo({
				success: function (res) {
					_this.windowHeight = (res.windowHeight - 157)+"px";
				}
			});
		  },
		  //手机全屏显示
		  onBackPress() {
		  	// #ifdef APP-PLUS
		  	plus.screen.lockOrientation('portrait-primary');
		  	// #endif
		  },
		methods: {
			...mapMutations(['setCity','setScale']),
			loadUserInfo() {
				this.$myRequest({
					method:'POST',
					url:'/api/user/info',
				}).then(res=>{
					if(res.data.code == 1){
						this.userInfo = res.data.data.user;
						if (this.userInfo.news_num > 0) {
							uni.showModal({
								title: '消息提示',
								content: '您有新的未读消息，是否前往查看？',
								cancelText: '去查看',
								cancelColor: '#F1A733',
								confirmText: '关闭',
								confirmColor: '#808080',
								// showCancel:false,
								success: function (res) {
									if (res.cancel) {
										uni.navigateTo({
										    url: '../news-core/news-core'
										});
									}
								}
							})
						}
					}
				});
			},
			getCovers(){
				var _this = this;
				this.$myRequest({
					method:'POST',
					url:'/api/lbs/nearby',
					data:{'location':this.longitude+','+this.latitude},
				}).then(res=>{
					if(res.data.code == 1){
						var list = res.data.data.list;
						var venue = [];
						_this.recommend_guide = res.data.data.recommend_guide;
						_this.guide_num = res.data.data.guide_num;
						_this.currentCity = res.data.data.city;
						if (!_this.cityInfo.city) {
							_this.cityInfo.city = _this.currentCity;
							_this.cityInfo.latitude = res.data.data.lat;
							_this.cityInfo.longitude = res.data.data.lng;
							_this.setCity(_this.cityInfo);
						}
						for(var i=0;i<list.length;i++){
							var v = {
								id: list[i]['id'],
								iconPath: '/static/images/guide'+list[i]['gender']+'.png',
								longitude: list[i]['lng'],
								latitude: list[i]['lat'],
								//title:list[i]['name'],
								callout:{
									content:list[i]['name']+"\n\n"+list[i]['tags'],
									padding:12,
									borderRadius:5,
									color:'#e1e1e1',
									bgColor:'#515151',
									fontSize:14,
								}
							};
							venue.push(v);
							_this.coversRaw.push(v);
						}
						_this.covers.push.apply(_this.covers, venue);				
						//_this.mapShow = true;						
					}
				})
			},
			markertap(e) {
				if (this.lastClickCover == e.detail.markerId) {
					return;
				}
				var lastId = this.lastClickCover.split('_');
				var _this = this;
				var newone;
				this.coversRaw.forEach(function(item, i) {
					if (item.id == lastId[0]) {
						newone = {
							id: item.id + '_' + _this.cover_i,
							iconPath: item.iconPath,
							longitude: item.longitude,
							latitude: item.latitude,
							callout: {
								content: item.callout.content,
								padding: 12,
								borderRadius: 5,
								color: '#e1e1e1',
								bgColor: '#515151',
								fontSize: 14,
							}
						};
						_this.covers.splice(i + 1, 1, newone);
					}
				});
				this.cover_i++;
				this.lastClickCover = e.detail.markerId;
			},
			callouttap(e){
				var gid = e.detail.markerId.split('_');
				if (gid[0] == -1) return;
				uni.navigateTo({
					url: '../guide-details/guide-details?id=' + gid[0],
				});
			},
			// 点击用户图标弹出头像框
			clickLeftUser(){
				this.isShow = true;
			},
			userEdit(){
				uni.navigateTo({
					url: '../user-edit/user-edit'
				})
			},
			// 点击隐藏头像框
			clickLeftHide(){
				this.isShow = false;
			},
			// 城市切换
			clickCity(){
				uni.navigateTo({
				    url: '../city/city'
				});
			},
			// 消息中心
			clickRightNews(){
				uni.navigateTo({
				    url: '../news-core/news-core'
				});
			},
			// 设置
			setUp(){
				uni.navigateTo({
				    url: '../set-up/set-up'
				});
			},
			// 预约订单
			bookingOrder(){
				uni.navigateTo({
				    url: '../booking-order/booking-order'
				});
			},
			// 订单列表
			orderList(){
				uni.navigateTo({
				    // url: '../orde-list/orde-list',
					url: '../custom-order/custom-order',
				});
			},
			setDemands(e){
				this.demands = e.detail.value; 
			},
			licekSubmit(){
				var demands = this.demands;
				this.$myRequest({
					method:'POST',
					url:'/api/customize/submit',
					data:{
						demands:demands,
					},
				}).then(res=>{
					this.showMessage(res.data.msg);
				})
			},
			myLocation(){
				this.setScale(15);
				window.location.reload();
			},
			showMessage(title){
				uni.showToast({
				    title: title,
				    duration: 3000,
					icon:"none",
				});
			}
		}
	}
</script>

<style scoped>
.search-icon{font-size: 68rpx;color: #AAAAAA;}
page{background-color: #FFFFFF;}
.index-icon{background-color: initial;}
.seek-guide{width: 20rpx;height: 26rpx;margin-top: -8rpx;margin-right: 6rpx;}
.seek-delicacy{width: 27rpx;height: 28rpx;margin-top: -10rpx;margin-right: 8rpx;}
.personal-tailor{width: 24rpx;height: 28rpx;margin-top: -10rpx;margin-right: 8rpx;}
.nav-pic{width: 46rpx; height: 46rpx;}
.nav-list{bottom: 50rpx;left: 30rpx;right: 30rpx;}
.demand{width: 160rpx;background-color: #3ec6ff;line-height: 2.8; height: 88rpx; color: #FFFFFF;box-shadow: 1px 1px 6px 2px #c3edff;}
.nav-list{bottom: 60rpx;}
.nav-pic{width: 60rpx;height: 60rpx;}
.border-rigth{border-right: 1px solid #dedede;}
.nav-number{top: -60rpx;right: 10rpx;color: #FFFFFF; padding:0 10rpx 8rpx; box-sizing: border-box; background-image: url(/h5/static/images/bg_01.png);background-repeat: no-repeat;background-size: 100% 100%;-moz-background-size: 100% 100%;}
</style>

